<template>
	<div class="list">
		<div class="item" v-for="item in list" :key="item.id">
			<input type="checkbox" v-model="item.isChecked" />
			<span>{{item.name}}</span>
		</div>
	</div>
</template>

<script>
	export default {
		name:'list-component',
		data(){
			return {
				
			}
		},
		methods:{
			handleChange(index){
				this.list.forEach(item => {
					if(item.id === index ){
						item.isChecked = !this.isChecked
					}
				})
			}
		},
		props:['list'],
	}
</script>

<style scoped>
	.list{
		margin: 10px 0px;
	}
	.item{
		width: 300px;
		border: 1px solid gray;
		padding: 5px;
	}
</style>